<template>
  <el-dialog :title="'选择区域 - ' + selectType" :visible.sync="open" :close-on-click-modal="false" width="60%" append-to-body>
    <div class="area-content" v-loading="loading">
      <!--楼栋-->
      <transition name="summary">
        <div v-if="show.showBuilding">
          <el-radio-group v-if="currentStandardRow.unitType==3" v-model="position.buildingId" @change="buildingChange">
            <div v-for="building in buildingList" :key="building.fid" class="building-item">
              <i class="el-icon-office-building building-icon" />
              <el-radio :label="building.fid" class="building-checkbox">{{ building.fnameL2 }}</el-radio>
            </div>
          </el-radio-group>
          <div v-else>
            <div v-for="building in buildingList" :key="building.fid" class="building-item" :class="{'selected-building': building.fid === position.buildingId}" @click="selectBuilding(building)">
              <svg-icon v-if="building.publicareatype===1" icon-class="scenery" color="#74a8f8" class="building-zhuangji-icon" />
              <svg-icon v-else-if="building.publicareatype===2" icon-class="park" color="#74a8f8" class="building-zhuangji-icon" />
              <svg-icon v-else-if="building.publicareatype===3" icon-class="under" color="#74a8f8" class="building-zhuangji-icon" />
              <svg-icon v-else-if="building.publicareatype===4" icon-class="pile" color="#74a8f8" class="building-zhuangji-icon" />
              <i v-else class="el-icon-office-building building-icon" />
              <div class="building-checkbox">{{ building.fnameL2 }}</div>
            </div>
          </div>
          <el-empty v-if="buildingList.length === 0" description="暂无数据" />
        </div>
      </transition>
      <!--楼层或房间-->
      <transition name="stats">
        <el-container v-if="show.showFloor && buildingViews.length > 0">
          <el-aside width="80px" class="plane-left">
            <div v-for="(floor, floorIndex) in floors" :key="'floor' + floorIndex" class="left-row">
              <div class="floor-left">{{ floor }}层</div>
              <div class="floor-right" />
            </div>
          </el-aside>
          <el-main class="plane-right">
            <div
              v-for="(buildingView, buildingViewIndex) in buildingViews"
              :key="'buildingView' + buildingViewIndex"
              :style="{ width: (buildingView.unitType === 2 ? buildingView.table[0].length * 94 : 134) + 'px' }"
              class="plane-right-column"
            >
              <building-plane
                :key="'buildingView' + buildingViewIndex"
                :active-role-code="activeRoleCode"
                :data="buildingView.table"
                :cell-width="buildingView.unitType === 2 ? 90 : 130"
                :cell-height="28"
                :fixed-width="true"
                :fixed-height="fixHeightUnitType.indexOf(buildingView.unitType) === -1"
                :extend-params="{ checkTableId: buildingView.checkTableId }"
                :style="{ height: floors.length > 0 ? floors.length * 32 + 'px' : '32px' }"
                @cellClick="buildingCellClickHandler"
              />
              <div class="right-column-label">
                {{ buildingView.checkTableName }}
              </div>
            </div>
          </el-main>
        </el-container>
        <el-empty v-if="show.showFloor && buildingViews.length === 0" description="暂无数据" />
      </transition>
      <!--桩基-->
      <transition name="stats">
        <div v-if="show.showZhuangji">
          <div style="margin: 0 0 30px 66px;">
            <el-input v-model="pileObj.name" clearable style="width: 300px;margin-right: 20px;" placeholder="请输入桩基名称" @change="searchPile" />
            <el-button type="primary" @click="searchPile" icon="el-icon-search">搜索</el-button>
          </div>
          <el-radio-group v-model="position.pileId">
            <div v-for="pile in pileList" :key="pile.id" class="building-item">
              <svg-icon icon-class="pile" color="#74a8f8" class="building-zhuangji-icon" />
              <el-radio :label="pile.id" class="building-checkbox">{{ pile.pileName }}</el-radio>
            </div>
          </el-radio-group>
          <el-empty v-if="pileList.length === 0" description="暂无数据" />
        </div>
      </transition>
    </div>
    <el-dialog
      width="30%"
      title="外立面"
      :visible.sync="openWLM"
      :close-on-click-modal="false"
      append-to-body
    >
      <el-radio-group v-model="position.direction">
        <el-radio v-for="name in directionOptions" :key="name" :label="name" border />
      </el-radio-group>
      <div slot="footer" style="margin-right: 80px;">
        <el-button type="primary" @click="submitWLM">确 定</el-button>
        <el-button @click="cancelWLM">取 消</el-button>
      </div>
    </el-dialog>
    <div style="text-align: right;margin: 20px 10px 0 0;">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button type="success" @click="lastStep" v-if="!show.showBuilding">上一步</el-button>
      <el-button @click="cancelForm">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  getCqBuildingList,
  getPhysicalFloors,
  getCqRoomList,
  getPileList
} from '@/api/projectInspection/courseCheck'
import BuildingPlane from '@/views/statement/components/BuildingPlane'
export default {
  name: 'UnqualifiedArea',
  components: {
    BuildingPlane
  },
  data() {
    return {
      loading: false,
      // 工序验收对象
      unitType: [{label: '楼层', value: 1},
        {label: '房间', value: 2},
        {label: '楼栋', value: 3},
        {label: '桩基', value: 4},
        {label: '公区', value: 5},
        {label: '外立面', value: 6},
        {label: '批次', value: 7}],
      // 楼栋 楼层 房间
      buildingViews: [],
      buildingViews1: [
        {
          'checkTableName': '楼栋4 ',
          'unitType': 1,
          'checkTableId': 'x9oAABeE7YBC0JIj',
          'table': [
            {
              'name': '11层',
              'objectId': '11',
              'status': 0
            },
            {
              'name': '10层',
              'objectId': '10',
              'status': 0
            },
            {
              'name': '9层',
              'objectId': '9',
              'status': 0
            },
            {
              'name': '8层',
              'objectId': '8',
              'status': 0
            },
            {
              'name': '7层',
              'objectId': '7',
              'status': 0
            },
            {
              'name': '6层',
              'objectId': '6',
              'status': 0
            },
            {
              'name': '5层',
              'objectId': '5',
              'status': 0
            },
            {
              'name': '4层',
              'objectId': '4',
              'status': 0
            },
            {
              'name': '3层',
              'objectId': '3',
              'status': 0
            },
            {
              'name': '2层',
              'objectId': '2',
              'status': 0
            },
            {
              'name': '1层',
              'objectId': '1',
              'status': 0
            }
          ]
        },
        {
          'checkTableName': '楼栋3 ',
          'unitType': 2,
          'checkTableId': 'x9oAABeE7YxC0JIj',
          'checkTypeName': '主体-砌体',
          'table': [
            [
              {
                'name': '1101',
                'objectId': 'x9oAABi7xF+QPgI2',
                'status': 10
              },
              {
                'name': '1102',
                'objectId': 'x9oAABi7xGCQPgI2',
                'status': 10
              },
              {
                'name': '1103',
                'objectId': 'x9oAABi7xGGQPgI2',
                'status': 0,
                'roleStatus': {

                }
              },
              {
                'name': '1104',
                'objectId': 'x9oAABi7xGKQPgI2',
                'status': 0,
                'roleStatus': {

                }
              }
            ],
            [
              {
                'name': '1001',
                'objectId': 'x9oAABi7xGOQPgI2',
                'status': 0,
                'roleStatus': {

                }
              },
              {
                'name': '1002',
                'objectId': 'x9oAABi7xGmQPgI2',
                'status': 0,
                'roleStatus': {

                }
              },
              {
                'name': '1003',
                'objectId': 'x9oAABi7xG6QPgI2',
                'status': 0,
                'roleStatus': {

                }
              },
              {
                'name': '1004',
                'objectId': 'x9oAABi7xG+QPgI2',
                'status': 0,
                'roleStatus': {

                }
              }
            ],
            [
              {
                'name': '901',
                'objectId': 'x9oAABi7xHCQPgI2',
                'status': 0,
                'roleStatus': {

                }
              },
              {
                'name': '902',
                'objectId': 'x9oAABi7xHGQPgI2',
                'status': 0,
                'roleStatus': {

                }
              },
              {
                'name': '903',
                'objectId': 'x9oAABi7xHKQPgI2',
                'status': 0,
                'roleStatus': {

                }
              },
              {
                'name': '904',
                'objectId': 'x9oAABi7xHOQPgI2',
                'status': 0,
                'roleStatus': {

                }
              }
            ],
            [
              {
                'name': '801',
                'objectId': 'x9oAABi7xHSQPgI2',
                'status': 0,
                'roleStatus': {

                }
              },
              {
                'name': '802',
                'objectId': 'x9oAABi7xHWQPgI2',
                'status': 0,
                'roleStatus': {

                }
              },
              {
                'name': '803',
                'objectId': 'x9oAABi7xHaQPgI2',
                'status': 0,
                'roleStatus': {

                }
              },
              {
                'name': '804',
                'objectId': 'x9oAABi7xHeQPgI2',
                'status': 0,
                'roleStatus': {

                }
              }
            ],
            [
              {
                'name': '701',
                'objectId': 'x9oAABi7xHiQPgI2',
                'status': 0,
                'roleStatus': {

                }
              },
              {
                'name': '702',
                'objectId': 'x9oAABi7xHmQPgI2',
                'status': 0,
                'roleStatus': {

                }
              },
              {
                'name': '703',
                'objectId': 'x9oAABi7xHqQPgI2',
                'status': 0,
                'roleStatus': {

                }
              },
              {
                'name': '704',
                'objectId': 'x9oAABi7xHuQPgI2',
                'status': 0,
                'roleStatus': {

                }
              }
            ],
            [
              {
                'name': '601',
                'objectId': 'x9oAABi7xHyQPgI2',
                'status': 0,
                'roleStatus': {

                }
              },
              {
                'name': '602',
                'objectId': 'x9oAABi7xH2QPgI2',
                'status': 0,
                'roleStatus': {

                }
              },
              {
                'name': '603',
                'objectId': 'x9oAABi7xH6QPgI2',
                'status': 0,
                'roleStatus': {

                }
              },
              {
                'name': '604',
                'objectId': 'x9oAABi7xImQPgI2',
                'status': 0,
                'roleStatus': {

                }
              }
            ],
            [
              {
                'name': '501',
                'objectId': 'x9oAABi7xIqQPgI2',
                'status': 0,
                'roleStatus': {

                }
              },
              {
                'name': '502',
                'objectId': 'x9oAABi7xIuQPgI2',
                'status': 0,
                'roleStatus': {

                }
              },
              {
                'name': '503',
                'objectId': 'x9oAABi7xIyQPgI2',
                'status': 0,
                'roleStatus': {

                }
              },
              {
                'name': '504',
                'objectId': 'x9oAABi7xI2QPgI2',
                'status': 0,
                'roleStatus': {

                }
              }
            ],
            [
              {
                'name': '401',
                'objectId': 'x9oAABi7xI6QPgI2',
                'status': 0,
                'roleStatus': {

                }
              },
              {
                'name': '402',
                'objectId': 'x9oAABi7xI+QPgI2',
                'status': 0,
                'roleStatus': {

                }
              },
              {
                'name': '403',
                'objectId': 'x9oAABi7xJGQPgI2',
                'status': 0,
                'roleStatus': {

                }
              },
              {
                'name': '404',
                'objectId': 'x9oAABi7xJKQPgI2',
                'status': 0,
                'roleStatus': {

                }
              }
            ],
            [
              {
                'name': '301',
                'objectId': 'x9oAABi7xJOQPgI2',
                'status': 0,
                'roleStatus': {

                }
              },
              {
                'name': '302',
                'objectId': 'x9oAABi7xJyQPgI2',
                'status': 0,
                'roleStatus': {

                }
              },
              {
                'name': '303',
                'objectId': 'x9oAABi7xJ6QPgI2',
                'status': 0,
                'roleStatus': {

                }
              },
              {
                'name': '304',
                'objectId': 'x9oAABi7xJ+QPgI2',
                'status': 0,
                'roleStatus': {

                }
              }
            ],
            [
              {
                'name': '201',
                'objectId': 'x9oAABi7xKCQPgI2',
                'status': 0,
                'roleStatus': {

                }
              },
              {
                'name': '202',
                'objectId': 'x9oAABi7xKGQPgI2',
                'status': 0,
                'roleStatus': {

                }
              },
              {
                'name': '203',
                'objectId': 'x9oAABi7xKWQPgI2',
                'status': 0,
                'roleStatus': {

                }
              },
              {
                'name': '204',
                'objectId': 'x9oAABi7xKmQPgI2',
                'status': 0,
                'roleStatus': {

                }
              }
            ],
            [
              {
                'name': '101',
                'objectId': 'x9oAABi7xKqQPgI2',
                'status': 0,
                'roleStatus': {

                }
              },
              {
                'name': '102',
                'objectId': 'x9oAABi7xKuQPgI2',
                'status': 0,
                'roleStatus': {

                }
              },
              {
                'name': '103',
                'objectId': 'x9oAABi7xKyQPgI2',
                'status': 0,
                'roleStatus': {

                }
              },
              {
                'name': '104',
                'objectId': 'x9oAABi7xK2QPgI2',
                'status': 0,
                'roleStatus': {

                }
              }
            ]
          ],
          'ratio': {

          }
        }
      ],
      floors: [11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1],
      activeRoleCode: '',
      fixHeightUnitType: [3, 4, 5, 6],
      open: false,
      openWLM: false,
      directionOptions: ['东面', '南面', '西面', '北面'],
      pileList: [],
      pileAllList: [],
      buildingList: [],
      floorList: [],
      roomList: [],
      form: {
        areaType: 'floor',
        selectedBuilding: '',
        selectedFloor: [],
        selectedRoom: [],
        publicArea: ''
      },
      viewArea: {
        selectedBuilding: [],
        selectedFloor: [],
        selectedRoom: [],
        publicArea: []
      },
      show: {
        showFloor: false,
        showBuilding: true,
        showZhuangji: false // 桩基
      },
      // 当前抽检对象
      checkRecordRow: {},
      // 当前验收标准数据
      currentStandardRow: {},
      // 选中位置
      position: {
        buildingId: '',
        projectId: '',
        roomId: '',
        floor: '',
        fileId: '',
        drawArea: '',
        pileId: '',
        pileName: '',
        shortName: '',
        basFid: '',
        direction: ''
      },
      pileObj: {
        name: ''
      },
      // 当前选中楼栋
      currentSelectedBuilding: {},
      selectType: ''
    }
  },
  created() { // 初始化

  },
  mounted() {
  },
  methods: {
    init(point, checkRecordRow) {
      this.open = true
      this.setShow('showBuilding')
      this.position.projectId = checkRecordRow.projectId
      this.checkRecordRow = checkRecordRow
      this.currentStandardRow = point
      // 验收对象
      if (this.currentStandardRow.unitType === 1) { // 楼层 1
        this.selectType = '楼层'
      } else if (this.currentStandardRow.unitType === 2) { // 房间 2
        this.selectType = '房间'
      } else if (this.currentStandardRow.unitType === 3) { // 楼栋
        this.selectType = '楼栋'
      } else if (this.currentStandardRow.unitType === 4) { // 桩基
        this.selectType = '桩基'
      } else if (this.currentStandardRow.unitType === 5) { // 公区
        this.selectType = '公区'
      } else if (this.currentStandardRow.unitType === 6) { // 外立面
        this.selectType = '外立面'
      } else { // 景观
        this.selectType = '其他'
      }
      // test data
      // this.currentStandardRow.unitType = 6
      this.getBuildingList()
      console.log(point, checkRecordRow)
    },
    submitWLM() {
      this.openWLM = false
    },
    cancelWLM() {
      this.openWLM = false
      this.position.direction = ''
    },
    searchPile() {
      this.pileList = this.pileAllList.filter(pile => pile.pileName.includes(this.pileObj.name))
    },
    /**
     * 平面单元点击事件处理
     * @param data
     */
    buildingCellClickHandler(data) {
      console.log(data)
      data.status = 10
      const tableFloor = this.buildingViews[0].table
      if (this.currentStandardRow.unitType === 1) {
        this.position.floor = data.objectId
        this.position.shortName = `${this.currentSelectedBuilding.fnameL2}-${data.objectId}层`
        for (let i = 0; i < tableFloor.length; i++) {
          if (tableFloor[i].objectId && tableFloor[i].objectId !== data.objectId) {
            tableFloor[i].status = 0
          }
        }
      } else if (this.currentStandardRow.unitType === 2) {
        this.position.roomId = data.objectId
        this.position.shortName = `${this.currentSelectedBuilding.fnameL2}-${data.name}`
        for (let i = 0; i < tableFloor.length; i++) {
          for (let j = 0; j < tableFloor[i].length; j++) {
            if (tableFloor[i][j].objectId && tableFloor[i][j].objectId !== data.objectId) {
              tableFloor[i][j].status = 0
            }
          }
        }
      }
    },
    // 获取桩基数据
    getPileList() {
      const params = {
        projectId: this.checkRecordRow.projectId,
        buildId: this.currentSelectedBuilding.fid
      }
      this.loading = true
      getPileList(params).then(
        response => {
          if (response.code === 200) {
            this.pileList = response.data
            this.pileAllList = response.data
          }
        }
      ).finally(() => {
        this.loading = false
      })
    },
    // 获取楼栋数据
    getBuildingList() {
      const params = {
        randomId: this.checkRecordRow.randomId,
        projectId: this.checkRecordRow.projectId,
        buildType: this.currentStandardRow.unitType
      }
      this.loading = true
      getCqBuildingList(params).then(
        response => {
          if (response.code === 200) {
            this.buildingList = response.data
          }
        }
      ).finally(() => {
        this.loading = false
      })
    },
    // 获取楼层数据
    getFloorList(building) {
      const params = {
        buildingId: building.fid
      }
      this.loading = true
      getPhysicalFloors(params).then(
        response => {
          if (response.code === 200) {
            if (response.data.length > 0) {
              this.floors = response.data
              const floorTable = []
              this.floors.forEach(floor => {
                floorTable.push({
                  name: floor + '层',
                  objectId: floor,
                  status: 0
                })
              })
              const buildFloor = {
                checkTableName: building.fnameL2,
                unitType: 1,
                table: floorTable
              }
              this.buildingViews = [buildFloor]
            } else {
              this.buildingViews = []
              this.floors = []
            }
          }
        }
      ).finally(() => {
        this.loading = false
      })
    },
    // 获取房间数据
    getRoomList(building) {
      const params = {
        buildId: building.fid
      }
      this.loading = true
      getCqRoomList(params).then(
        response => {
          if (response.code === 200) {
            this.floors = response.data.floors
            const rooms = response.data.rooms
            for (let i = 0; i < rooms.length; i++) {
              for (let j = 0; j < rooms[i].length; j++) {
                if (rooms[i][j].name) {
                  rooms[i][j].status = 0
                }
              }
            }
            const buildFloor = {
              checkTableName: building.fnameL2,
              unitType: 2,
              table: rooms
            }
            this.buildingViews = [buildFloor]
          }
        }
      ).finally(() => {
        this.loading = false
      })
    },
    selectBuilding(building) {
      console.log(building, this.currentStandardRow)
      // test data
      // building.publicareatype = 1
      this.currentSelectedBuilding = building
      if (this.position.buildingId !== building.fid) {
        this.position.direction = ''
      }
      this.position.buildingId = building.fid
      if (this.currentStandardRow.unitType === 1) { // 楼层 1
        this.setShow('showFloor')
        this.selectType = '楼层'
        this.getFloorList(building)
      } else if (this.currentStandardRow.unitType === 2) { // 房间 2
        this.setShow('showFloor')
        this.selectType = '房间'
        this.getRoomList(building)
      } else if (this.currentStandardRow.unitType === 4 || building.publicareatype === 4) { // 桩基
        this.selectType = '桩基'
        this.getPileList()
        this.setShow('showZhuangji')
      } else if (this.currentStandardRow.unitType === 6) { // 外立面
        this.selectType = '外立面'
        this.openWLM = true
      } else if (this.currentStandardRow.unitType === 7) { // 批次
        // setShow('')
      }
    },
    // 设置选择区域显示
    setShow(val) {
      for (const key in this.show) {
        if (val === key) {
          this.show[key] = true
        } else {
          this.show[key] = false
        }
      }
    },
    buildingChange(val) {
      console.log(val)
      this.position.buildingId = val
      for (let i = 0; i < this.buildingList.length; i++) {
        if (val === this.buildingList[i].fid) {
          this.currentSelectedBuilding = this.buildingList[i]
        }
      }
      /* if (this.form.areaType === 'building') {
        this.showFloor = false
        this.showBuilding = true
        for (let i = 0; i < this.buildingList.length; i++) {
          if (this.form.selectedBuilding.some(id => id === this.buildingList[i].id)) { // 表单已选项
            if (!this.viewArea.selectedBuilding.some(building => building.id === this.buildingList[i].id)) { // 已选中不存在
              this.viewArea.selectedBuilding.push({...this.buildingList[i]})
            }
          } else { // 表单中 未选项
            if (this.viewArea.selectedBuilding.some(building => building.id === this.buildingList[i].id)) { // 已选中存在
              for (let j = 0; j < this.viewArea.selectedBuilding.length; j++) {
                if (this.viewArea.selectedBuilding[j].id === this.buildingList[i].id) {
                  this.viewArea.selectedBuilding.splice(j, 1)
                }
              }
            }
          }
        }
      }*/
    },
    submitForm() {
      const { position } = this
      const { unitType } = this.currentStandardRow

      if (unitType === 1) {
        if (!position.buildingId) return this.$message.info('请选择楼栋')
        if (!position.floor) return this.$message.info('请选择楼层')
      } else if (unitType === 2) {
        if (!position.buildingId) return this.$message.info('请选择楼栋')
        if (!position.roomId) return this.$message.info('请选择房间')
      } else if (unitType === 3) {
        if (!position.buildingId) return this.$message.info('请选择楼栋')
      // } else if (unitType === 4 || building.publicareatype === 4) {
      } else if (unitType === 4 || this.show.showZhuangji) {
        if (!position.pileId) return this.$message.info('请选择桩基')
      } else if (unitType === 5) {
        if (!position.buildingId) return this.$message.info('请选择公区')
      } else if (unitType === 6) {
        if (!position.buildingId) return this.$message.info('请选择楼栋')
        if (!position.direction) return this.$message.info('请选择外立面')
      } else if (unitType === 7) {
        // 选择批次，暂不用
        return (this.open = false)
      } else {
        return (this.open = false)
      }

      this.$emit('ok', { position })
      this.open = false
    },
    lastStep() {
      this.setShow('showBuilding')
    },
    cancelForm() {
      this.open = false
    }
  }
}
</script>

<style scoped lang='scss'>
  .plane-left {
    background-color: #FFF;
    padding: 0;
    margin: 0;
    flex: 0 0 80px;
    .plane-left-top {
    }
    .plane-left-middle {
      padding: 0;
    }
    .plane-left-bottom {
      background-color: #00adff;
    }
    .left-row {
      width: 100%;
      color: #666;
      font-size: 14px;
      display: inline-flex;
      justify-items: center;
      align-items: center;
      height: 30px;
      justify-content: center;
      .role-sign {
        width: 16px;
        height: 16px;
        border-radius: 3px;
        background: #64aeec;
        color: #fff;
        font-size: 8px;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .floor-left {
        text-align: center;
        color: #666;
        font-size: 14px;
        height: 30px;
        line-height: 30px;
        padding: 0 5px;
        width: 55px;
      }
      .floor-right {
        border-top: 1px solid #666;
        border-left: 1px solid #666;
        width: 5px;
        height: 32px;
      }
      .left-row:last-child .floor-right {
        border-bottom: 1px solid #666;
      }
    }
  }
  .plane-right {
      padding: 0;
      display: flex;
      .plane-right-column {
        .right-column-cell {
          height: 30px;
          margin: 0 2px;
          .progress-bar {
            height: 18px;
            border-radius: 10px;
            background: #f5f5f5;
            display: flex;
            align-items: center;
            margin: 2px 0;
            position: relative;
            box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.1);
            flex: 1;
            overflow: hidden;
            .progress-bar-line {
              color: #525252;
              background-color: #80c9b5;
              font-size: 14px;
            }
            .progress-placeholder {
              position: absolute;
              width: 100%;
              height: 100%;
              color: #666;
              text-align: center;
              font-size: 14px;
            }
          }
        }
        .right-column-label {
          font-size: 14px;
          text-align: center;
        }
      }
      .plane-right-top {
        padding: 0;
      }
      .plane-right-middle {
        padding: 0;

      }
      .plane-right-bottom {
        background-color: #00adff;
      }
      .right-column {
        display: inline-block;
        .right-column-cell {
          height: 30px;
          .progress-bar {
            height: 18px;
            border-radius: 10px;
            background: #f5f5f5;
            display: flex;
            align-items: center;
            margin: 2px 0;
            position: relative;
            box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.1);
            flex: 1;
            overflow: hidden;
            .progress-bar-line {
              color: #525252;
              background-color: #80c9b5;
              font-size: 14px;
            }
            .progress-placeholder {
              position: absolute;
              width: 100%;
              height: 100%;
              color: #666;
              text-align: center;
              font-size: 14px;
            }
          }
        }
      }
    }
  .area-content {
    height: 60vh;
    overflow-y: auto;
    .selected-building {
      background-color: rgba(224, 238, 253, 0.5);
      border-radius: 5px;
      padding: 20px;
    }
    .building-item {
      display: inline-block;
      width: 200px;
      text-align: center;
      margin-bottom: 30px;
      cursor: pointer;
      .building-zhuangji-icon,
      .building-icon {
        padding: 10px;
        border-radius: 6px;
        font-size: 50px;
        background: #e0eefd;
        color: #74a8f8;
        margin-bottom: 10px;
      }
      .building-zhuangji-icon {
        font-size: 70px;
      }
      .building-checkbox {
        display: block;
      }
    }
  }
  // 切换动画
  .area-content {
    position: relative;
    width: 100%;
    padding: 10px;
    margin-left: -10px;
    margin-right: -10px;
  }
  .summary-enter,
  .summary-leave-active {
    opacity: 0;
    left: -100%;
  }
  .stats-enter-active {
    position: absolute;
    left: 100%;
  }
  .stats-enter-to {
    position: absolute;
    left: 10px;
  }
  .stats-leave-active {
    position: absolute;
    opacity: 0;
    left: 100%;
  }
</style>
